<template>
  <div :xl="6" :lg="7" class="bg-login">
   <!--标题-->
   <el-row type="flex" class="row-bg row-two" justify="center" align="middle">
     <el-col :span="6"></el-col>
     <el-col :span="6">
       <!--标题-->
       <h1 class="title">营养膳食系统——注册页面</h1>
     </el-col>
     <el-col :span="6"></el-col>
   </el-row>
   <!--form表单-->
   <el-row type="flex" class="row-bg card" justify="center" align="bottom">
     <el-col :span="7" class="login-card">
       <!--loginForm-->
       <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="21%" class="loginForm">
         <el-form-item label="账户" prop="username" style="width: 380px">
           <el-input v-model="loginForm.username"></el-input>
         </el-form-item>
         <el-form-item label="密码" prop="password" style="width: 380px">
           <el-input type="password" v-model="loginForm.password"></el-input>
         </el-form-item>
         <el-form-item label="邮箱" prop="email" style="width: 380px">
           <el-input v-model="loginForm.email"></el-input>
         </el-form-item>
         <el-form-item label="验证码" prop="code" style="width: 380px">
          <el-input v-model="loginForm.code" class="code-input" style="width: 45%;float: left"></el-input>
          <el-button @click="gainCode()" type="success"  style=" font-size: 14px;  margin-left: 15px;">获取邮箱验证码</el-button>
         </el-form-item>
         <el-form-item label="手机号" prop="phone" style="width: 380px">
           <el-input v-model="loginForm.phone"></el-input>
         </el-form-item>
         <el-form-item label="所在地" prop="city" style="width: 380px">
           <el-input v-model="loginForm.city"></el-input>
         </el-form-item>
         <el-form-item class="btn-ground">
           <el-button type="primary" @click="submitForm('loginForm')">立即注册</el-button>
           <el-button @click="resetForm('loginForm')">重置</el-button>
           <router-link class="register" :to="{name:'Login'}">已有账号，点击登录</router-link>
         </el-form-item>
       </el-form>
     </el-col>
     
   </el-row>
   
 </div>

</template>

<script>

 import { truncateSync } from 'fs';
import qs from 'qs'
import router from '../router';

 export default {
   name: "Register",
   data() {
     return {
       loginForm: {
         username: '',
         password: '',
         code: '',
         email: '',
         phone: '',
         city: ''
       },
       rules: {
         username: [
           { required: true, message: '请输入用户名', trigger: 'blur' }
         ],
         password: [
           { required: true, message: '请输入密码', trigger: 'blur' }
         ],
         code: [
           { required: true, message: '请输入验证码', trigger: 'blur' },
           { min: 6, max: 6, message: '长度为 4 个字符', trigger: 'blur' }
         ],
         email:[
          {required: true, message: '请输入邮箱',trigger:'blur'},
          {pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,message:"请输入正确的邮箱",trigger:'blur'}
        ],
        phone:[
          {required:true, message:'请输入手机号',trigger:'blur'}
        ],
        city:[
          {required: true,message:'请输入所在地',trigger:'blur'}
        ]
       },
     };
   },
   methods: {
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
           this.$axios.post('/register',this.loginForm).then(res=>{
              this.$message.success("注册完成");
              router.push('/login');
           })
         } else {
           console.log('error submit!!');
           return false;
         }
        
       });
     },
     resetForm(formName) {
       this.$refs[formName].resetFields();
     },
     gainCode(){
       let email = this.loginForm.email;
       if(email == null || email ==""){
         this.$message.error("请先填写邮箱再获取！");
         retrun;
       }
       const emailRex = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
       if(!emailRex.test(email)){
        this.$message.error("请输入正确的邮箱");
        return;
       }
       this.$axios.get("/gainCode?email="+email).then(res=>{
         if(res.data.code){
           this.$message.success(res.data.data);
         }else{
          this.$message.error(res.data.data);
         }
       })
     }
  },
   created() {
    
   }
 }
</script>

<style scoped>

 body{
 margin: 0px;
}
.codeImg {
 /*让验证码图片飘在右边*/
 float: right;
 /*设置一些圆角边框*/
 border-radius: 3px;
 /*设置宽度*/
 width: 30%;
 padding-top: 8px;
}

.bg-login {
 height: 100vh;
 background-size: 200%;
}

.btn-ground {
 text-align: center;
}

.logo {
 margin: 30px;
 height: 70px;
 width: 200px;
 position: fixed;
}

.title {
 text-shadow: -3px 3px 1px #5f565e;
 text-align: center;
 margin: 10% 0;
 margin-left: 50%;
 transform: translateX(-50%);
 color: #52a807;
 font-size: 50px;
 width: 800px;
}

.login-card {
 background-color: #fff;
 box-shadow: 0 0 20px gray;
 border-radius: 10px;
 padding: 10px 40px 0 25px;
 width: auto;
}

.register{
 text-decoration: none;
 color: black;
 display: block;
 width: 254px;
 margin-top: 3px;
}
.bg-login /deep/ .el-form-item__label {
  font-size: 18px;
  color: #000;
}
.register:hover{
 color: #52a807;
 font-weight: 700;
}


</style>